<template>
  <div class="experience">
    <div class="title">
      <span>{{title}}</span>
    </div>
    <el-steps direction="vertical" :active="data.length">
      <template v-for="(item,index) in data">
        <template v-if="type==='education'">
          <el-step  :key="index">
            <i class="pointer" slot="title" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.showName,item.displayName,item.iconUrl,item.belongGroup)">{{item.experience.timeStart+'-'+item.experience.timeEnd}}</i>
            <p slot="description">学校:{{item.experience.schoolName}}</p>
            <p slot="description">专业:{{item.experience.profession}}</p>
            <p slot="description">学位:{{item.experience.degree}}</p>
          </el-step>
        </template>
        <template v-else>
          <el-step :key="index">
            <i  class="pointer" slot="title" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.showName,item.displayName,item.iconUrl,item.belongGroup)">{{item.experience.timeStart+'-'+item.experience.timeEnd}}</i>
            <p slot="description">企业名称:{{item.experience.companyName}}</p>
            <p slot="description">头衔:{{item.experience.title}}</p>
          </el-step>
        </template>
      </template>
    </el-steps>
  </div>
</template>
<script>
export default {
    name: 'objExperience',
    props: {
        title: String,
        type: String,
        data: Array
    },
    methods: {
        // 对象查看
        viewObjectInfo (objectType, instanceUri, objectUri, name, showName, displayName, icon, belongGroup) {
            displayName = showName || displayName
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
            window.open(currentUrl, '')
        }
    }
}
</script>
<style lang="scss" scoped>
.experience {
	.el-step {
		flex-basis: 100px !important;
	}
	.title {
		height: 35px;
		padding: 5px 25px 0px 12px;
		line-height: 30px;
		span {
			border-left: solid 4px #999;
			padding-left: 12px;
			font-weight: bolder;
		}
	}
}
</style>
<style lang="scss" >
$el-step_desc_color: #000000;
.experience {
	.el-step__description {
		color: $el-step_desc_color !important;
		font-size: 14px;
	}
}
</style>
